デザイナーが集まってモーダルUIを話し合ってみた

暗黙知になっていることをクラスメソッドのデザイナーみんなで共有してみようの会として、UIの共有会を開催しました。 今回は入力フォームのルールについて対話しました。

これまでの共有会
デザイナー間で命名に関する共有会を実施しました
デザイナーが集まってインプットUIを話し合ってみた
ひとまず今回に関しては、情報共有して認識を合わせることが目的のため、「クラスメソッドではこうしてます！」みたいなものではない点はご了承ください。

今回の共有会は「モーダル」です。メイントピックとなるモーダルはアプリ上のUIのモーダル（特にiOS）で、PCのUIは今回対象外です。

モーダルについて学ぼう

モーダルを知るにはまず「モード」を知るべし

ユーザーの操作が必須の場合、外部領域をクリックできなくなるといったインタラクションに制限がかかることがあります。
求められる操作（特定のボタンを押す）が行われるまで他の操作に移ることができない状態を「モード」と呼びます。モーダルはまさにこのモードを作り出している状態の画面UIです。

まさに今アプリを消そうとしている操作のモードに入っています。

コンテンツをモーダル表示すべき時

ヒューマンインターフェイスガイドライン モダリティの項目にてモーダル表示によって可能になることが述べられています。下記の目的を果たすための使用が望ましいようです。

• 人々が重要な情報を受け取り、必要に応じて行動できるようにする
• 最近のアクションを確認または変更できるオプションを提供する
• 前の文脈を見失うことなく、明確で限定されたタスクを実行できるようにする
• 没入感のある体験や、複雑なタスクに集中できるようにする

PCと比較するとモバイル端末はいつ、どこで、誰が、どんなシチュエーションで使っているかを限定しにくいです。だからこそ、大事な操作はどんな状況でも集中できる状態を作って簡潔に伝えて正確に操作ができる必要がありますね。

スマホアプリ特有？ハーフモーダル（セミモーダル）とは

ハーフモーダルとはモードの状態でモーダルの背後の操作が見えるようになっている状態です。画面下から上へせり上がってくる動作を伴うことが多いです。 例えば、WebブラウザのSafari内で共有ボタンを選択した際、それを誰か/別アプリに共有する操作をするためのハーフモーダルが出現します（数が多数の場合は一部のみ）

モーダルではないダイアログ

PCではモーダルダイアログに対し、背後で操作が可能なダイアログはモードレスダイアログと呼ばれています。ただPCと違い、アプリのUIにおいてはモードレスダイアログと明確に呼ばれているものは存在していないようです。（そもそも外部領域が狭いですからね…）
アプリUIにおいては、ダイアログがモーダルではない状態として非モーダルな状態があるぐらいの認識で、よく使われる事例を押さえておくのが良いかもしれません。非モーダルな状態は、手前に出ているダイアログがありながらも後ろで操作が可能な状態です。よくある一例として、マップアプリの画面があります。

典型的なハーフモーダル

モーダル上の操作を完了するかキャンセルしない限り後ろの画面は動かせません

マップのダイアログ

前にダイアログが出ていても後ろの地図が動かせます

モーダル・非モーダルのベストプラクティス

ヒューマンインターフェイスガイドライン　シートの項目にてモーダル・非モーダルのベストプラクティスがありました。

• シートは、没入感のないコンテンツを表示したり、簡単な作業を可能にするために使用します。
• 没入感のあるコンテンツを表示したり、複雑な作業を可能にするには、シートに代わるものを検討します。
• メインインターフェイスから一度に表示できるシートは1枚だけにします。
• 親ビューのメインタスクに影響を与える補助的なアイテムを表示したい場合は、非モーダルビューを使用します。

非モーダルの場合、モーダルの表示範囲を広くまたは狭くできるので、親ビューと非モーダルの画面を行き来するような場合に使うと良いかもしれませんね。

その他

共有会でハーフモーダルとフルのモーダルの使い分けについて話題が上がりましたが、明確な使い分けのルールはなさそうという話になりました。そのために、どちらのモーダルを用いるかは世の中アプリ遷移を比較して最適解を見つけていくしかなさそうです…（デザイナー間でも迷うという話になりました）

遷移からモーダルを考える

モーダルを理解する上で考慮する遷移方法はプッシュ（階層型）、モーダル（分岐型）です。　

プッシュ（階層型）

プッシュ遷移は階層構造のデータに遷移する場合に用いられます。あるひとつのタスクを遂行する目的を持ちます。

メールアプリの事例
メールボックス/受信トレイ/受信メール一覧/受信メール全文
と階層の奥へ進む遷移です

モーダルで遷移する場合の動作というのは決まっていて、アプリ内のメインタスクと異なる動作をする場合に用いています。

モーダル（分岐型）

現在のメインタスクとは外れた、サブタスクを取り扱う一時的な画面がモーダルで表示されます。多くの場合下から新しい画面が被さるアニメーションを伴います。

写真アプリの事例
メインのタスクはサムネイルをクリックして写真を見ることですが、
サムネイルから共有するための操作（メインタスクとは別の操作）ができます

共有会で話題になった使い分けや使用シーン

デザインする上でモーダル遷移とプッシュ遷移を迷ったことがあるという話題になりました。社内メンバーがモーダルを使用する場合の判断する材料として以下の場合が多いようです。

• 操作キャンセルできる
• 単純な機能（複数の操作はモーダル上では難しい）
• WebView

あと社内案件ではアパレル企業のアプリでの使用事例が話題になりました。例えば商品を検索して絞り込み検索を行う（ソートする）サブタスクのためにモーダルを使用しています。

今回は弊社でも開発案件として多いiOSアプリでのモーダルについての話題がメインでしたが、Androidではどのような表示で動作になるのかもまとめたいと思います。

参考

ダイアログウィンドウ / ダイアログボックス
「モーダル」と「モードレス」
iOS ヒューマンインターフェースの原則
iOS13の半モーダル/モーダルUIの特徴
iOSにおける半モーダルビューの解釈